<script setup>
import { getBoyImage, getGirlImg } from '../utils/defaultImg.js'
import { computed, ref, watch } from 'vue'
const defaultBoy = getBoyImage()
const defaultGirl = getGirlImg()
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({
      name: '张三',
      num: 111,
      class: 1,
      sex: '男',
      pic: '',
      size: 10,
      index: 0
    })
  },
  showButton: {
    type: Boolean,
    default: true
  }
})
//设置默认头像
const defaultAvatar = computed(() => {
  if (props.userInfo.pic && props.userInfo.pic.length > 10) {
    return props.userInfo.pic
  } else {
    return props.userInfo.sex == '男' ? defaultBoy : defaultGirl
  }
})
//emit
const emit = defineEmits(['changeUserCard'])
const changeUserCard = (index) => {
  loadingCard.value = true
  setTimeout(() => {
    emit('changeUserCard', index)
    loadingCard.value = false
    ListRandom.value = Math.floor(Math.random() * 100)
  }, 500)
}
const loadingCard = ref(false)
const correct = ref(0)
const incorrect = ref(0)
const partiallyCorrect = ref(0)
const usInfo = computed(() => props.userInfo)
watch(
  usInfo,
  (newVal) => {
    console.log('监听')
    correct.value = 0
    incorrect.value = 0
    partiallyCorrect.value = 0
    newVal.call?.forEach((e) => {
      e.answerResult == 1
        ? correct.value++
        : e.answerResult == 2
          ? partiallyCorrect.value++
          : incorrect.value++
    })
  },
  {
    immediate: true
  }
)
const list = ref([
  '明日复明日，明日何其多，我生待明日，万事成蹉跎',
  '长风破浪会有时，直挂云帆济沧海',
  '宝剑锋从磨砺出，梅花香自苦寒来',
  '学海无涯苦作舟，书山有路勤为径',
  '路漫漫其修远兮，吾将上下而求索',
  '千磨万击还坚劲，任尔东西南北风',
  '人生若只如初见，何事秋风悲画扇',
  '百尺竿头须进步，十方世界是全身',
  '少壮不努力，老大徒伤悲',
  '志不强者智不达，言不信者行不果',
  '宁可枝头抱香死，何曾吹落北风中',
  '海内存知己，天涯若比邻',
  '一失足成千古恨，再回头已百年身',
  '山重水复疑无路，柳暗花明又一村',
  '人生自古谁无死，留取丹心照汗青',
  '东边日出西边雨，道是无晴却有晴',
  '欲穷千里目，更上一层楼',
  '问渠那得清如许？为有源头活水来',
  '会当凌绝顶，一览众山小',
  '天生我材必有用，千金散尽还复来',
  '世上无难事，只怕有心人',
  '人生得意须尽欢，莫使金樽空对月',
  '三军可夺帅也，匹夫不可夺志也',
  '业精于勤，荒于嬉；行成于思，毁于随',
  '乘风破浪会有时，直挂云帆济沧海',
  '天道酬勤，功不唐捐',
  '学然后知不足，教然后知困',
  '长河落日圆，孤烟直',
  '临渊羡鱼，不如退而结网',
  '学海无涯，唯笃行能至',
  '读书破万卷，下笔如有神',
  '知足者常乐，主动者常胜',
  '己所不欲，勿施于人',
  '君子藏器于身，待时而动',
  '沉舟侧畔千帆过，病树前头万木春',
  '士为知己者死，女为悦己者容',
  '三人行，必有我师焉',
  '学而不思则罔，思而不学则殆',
  '勤学如春起之苗，不见其增，日有所长',
  '勤能补拙是良训，一分辛苦一分才',
  '书犹药也，善读之可以医愚',
  '逆水行舟，不进则退',
  '学然后知不足，教然后知困',
  '志士惜日短，愁人知夜长',
  '水滴石穿，绳锯木断',
  '人生如梦，一尊还酹江月',
  '知之者不如好之者，好之者不如乐之者',
  '人生不售来回票，一旦动身，绝不能复返',
  '读书百遍，其义自见',
  '有志者事竟成，破釜沉舟，百二秦关终属楚',
  '逆境是成长的必经之路，挫折是成功的垫脚石',
  '成功并非终点，勇气才是继续前行的力量',
  '前途似海，来日方长',
  '机会总是留给有准备的人',
  '不积跬步，无以至千里；不积小流，无以成江海',
  '人生最大的敌人是自己，最大的挑战是超越自我',
  '梦想不会逃跑，会逃跑的永远是自己',
  '每一次努力都不会白费，每一滴汗水都孕育着希望',
  '未来是属于那些相信自己梦想的人',
  '保持初心，不忘初心，砥砺前行',
  '不畏浮云遮望眼，只缘身在最高层',
  '不怕慢，只怕站；不怕千万里，只怕退缩',
  '每一个不曾起舞的日子，都是对生命的辜负',
  '没有比脚更长的路，没有比人更高的山',
  '勇敢追梦，永不言弃',
  '行胜于言，行动是最好的证明',
  '你的时间有限，不要浪费时间去过别人的生活',
  '不怕路长，只怕志短',
  '保持好奇心，不断学习，永不停止',
  '成功的背后往往伴随着无数次的失败',
  '每一天都是一个新的开始，不要让昨天的遗憾影响今天的决定',
  '挑战自我，超越极限',
  '信念是成功的钥匙',
  '无论多么艰难，都要坚持到最后',
  '相信自己，你是最棒的',
  '坚持不懈，直到成功',
  '努力不懈，梦想终会实现',
  '逆境中成长，困境中坚强',
  '人生没有彩排，每一天都是现场直播',
  '勇敢面对挑战，不断向前',
  '不断学习，不断进步',
  '勇敢地迈出第一步，成功就会紧随其后',
  '坚持就是胜利',
  '保持积极，迎接每一个新的挑战',
  '机会总是留给那些准备好的人',
  '每一个小小的进步都是成功的积累',
  '梦想在远方，勇敢迈向未来',
  '持之以恒，梦想成真',
  '不怕困难，只怕失去信心',
  '每一次努力都值得肯定',
  '勇敢追梦，永不放弃',
  '持续进步，成就辉煌',
  '坚定信念，勇往直前',
  '每一步都是成功的积累',
  '梦想就在前方，勇敢前行',
  '持续努力，创造奇迹',
  '勇敢地去追求，梦想终会实现',
  '不怕失败，只怕不尝试',
  '每一个今天都是最好的开始',
  '保持热情，永不放弃梦想'
])
const ListRandom = ref(Math.floor(Math.random() * 100))
</script>
<template>
  <div v-loading="loadingCard" element-loading-text="疯狂加载中..." class="layout_card">
    <el-descriptions class="margin-top" :column="3" :size="12" border>
      <el-descriptions-item span="1">
        <template #label>
          <div class="cell-item">
            <el-icon><Picture /></el-icon>
            头像
          </div>
        </template>
        <img class="img" :src="defaultAvatar" alt="" />
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template #label>
          <div class="cell-item">
            <el-icon><EditPen /></el-icon>
            寄语
          </div>
        </template>
        {{
          correct || incorrect || partiallyCorrect
            ? correct > incorrect
              ? list[ListRandom]
              : '加油继续努力'
            : '不是哥们还没回答问题吗'
        }}
      </el-descriptions-item>
      <el-descriptions-item span="1">
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            姓名
          </div>
        </template>
        {{ userInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon><Postcard /></el-icon>
            学号
          </div>
        </template>
        {{ userInfo.num }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location />
            </el-icon>
            班级
          </div>
        </template>
        {{ userInfo.class }}班
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            回答正确
          </div>
        </template>
        <el-tag type="success">{{ correct }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets />
            </el-icon>
            回答基本正确
          </div>
        </template>
        <el-tag warning>{{ partiallyCorrect }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            回答错误
          </div>
        </template>
        <el-tag type="error">{{ incorrect }}</el-tag>
      </el-descriptions-item>

      <div></div>
    </el-descriptions>
    <div v-if="showButton" class="buttom">
      <div>
        <el-button
          type="primary"
          :disabled="userInfo.index == 0"
          @click="changeUserCard(userInfo.index - 1)"
          >上一位</el-button
        >
        <el-button
          type="primary"
          :disabled="userInfo.index == userInfo.size - 1"
          @click="changeUserCard(userInfo.index + 1)"
          >下一位</el-button
        >
      </div>
    </div>
  </div>
</template>
<style scoped>
.img {
  width: 7rem;
  height: 7rem;
}
.buttom {
  text-align: right;
  margin-top: 1rem;
}
.layout_card {
  width: 100%;
  height: 100%;
}
</style>
